<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <head>
        <title>Contact</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <ui:include src="master/library.xhtml"></ui:include>
        <style type="text/css">
            #javax_faces_developmentstage_messages{
                display: none;
            }
        </style>
    </head>
    <body onload="selected()">
        <!--==============================header=================================-->
        <ui:include src="master/header.xhtml"></ui:include>
        <!--===========================content================================-->
        <div id="content">
            <div class="p102">
                <div class="container_12">
                    <div class="grid_8">
                        <h3>stay in<br/><span>touch</span></h3>
                        <div class="map">
                            <iframe class="map_c" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.0931149109338!2d105.78190726137694!3d21.02895992860694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x313454b3260b1a8b%3A0x862052392e3f478e!2zRGV0ZWNoIFRvd2VyLCA4IFTDtG4gVGjhuqV0IFRodXnhur90LCBUcsaw4budbmcgxJDhuqFpIGjhu41jIEZQVCwgTeG7uSDEkMOsbmggMiwgVOG7qyBMacOqbSwgSMOgIE7hu5lpLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2sus!4v1408614385672" width="600" height="450" frameborder="0" style="border:0"></iframe>
                        </div>
                        <div class="grid_4 alpha">
                            <address class="address">
                                <p>FPT University,Detech Tower, 8 Ton That Thuyet.</p>
                                <dl>
                                    <dt></dt>
                                    <dd>Phone: <span>+84 37 958 652</span></dd>
                                    <dd>FAX: <span>+84 504 889 9898</span></dd>
                                    <dd>E-mail: <span><a href="#">Blue_Pumpkin@vn.org</a></span></dd>
                                </dl>
                            </address>
                        </div>
                    </div>
                    <div class="grid_4">
                        <h3>contact<br/><span>form</span></h3>
                        <h:form id="contact-form">
                            <div class="contact-form-loader"></div>
                            <fieldset>
                                <label class="name">
                                    <h:inputText id="txtName" p:placeholder="Name" required="true" requiredMessage=" * Please enter Name ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '50'">
                                        <f:validateLength for="txtName" minimum="2" maximum="50"/>
<!--                                        <f:validateRegex pattern="<(\"[^\"]*\"|'[^']*'|[^'\">])*>" />-->
                                    </h:inputText>
                                    <h:message for="txtName" style="color:red" />
                                </label>
                                <label class="email">
                                    <h:inputText id="txtEmail" value="#{contactUs.sender}" p:placeholder="Email" required="true" requiredMessage=" * Please enter Email ! " validatorMessage=" * Please enter a valid Email !">
                                        <f:validateRegex pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"/>
                                    </h:inputText>
                                    <h:message for="txtEmail" style="color:red"/>
                                </label>
                                <label class="subject">
                                    <h:inputText id="txtSubject" value="#{contactUs.subject}" p:placeholder="Subject" required="true" requiredMessage=" * Please enter Subject ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '50'">
                                       <f:validateLength for="txtName" minimum="2" maximum="50"/>
                                    </h:inputText>
                                    <h:message for="txtSubject" style="color:red"/>
                                </label>
                                <label class="message">
                                    <h:inputTextarea id="txtMessage" value="#{contactUs.message}" p:placeholder="Message" required="true" requiredMessage=" * Please enter Message ! " validatorMessage="* Name Length is less than allowable minimum of '2' and maximum of '999'">
                                        <f:validateLength for="txtMessage" minimum="2" maximum="999"/>
                                    </h:inputTextarea>
                                    <h:message for="txtMessage" style="color:red"/>
                                </label>
                                <label class="status">
                                    <h:outputLabel id="txtStatus" value="#{contactUs.statusMessage}"/>
                                </label>
                                <div>   
                                    <h:commandButton id="btnReset" p:type="reset" value="Reset" class="link btns"/>
                                    <h:commandButton id="btnSend" type="submit" value="Send" class="link btns" action="#{contactUs.send()}"></h:commandButton>
                                </div>
                            </fieldset> 
                            <div class="modal fade response-message">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title">Modal title</h4>
                                        </div>
                                        <div class="modal-body">
                                            You message has been sent! We will be in touch soon.
                                        </div>      
                                    </div>
                                </div>
                            </div>
                        </h:form> 
                    </div>
                </div>
            </div>       
        </div>
        <!--==============================footer=================================-->
        <ui:include src="master/footer.xhtml"></ui:include>

        <script type="text/javascript">
            function selected() {
                $('#contact').addClass('current');
            }
        </script>
    </body>
</html>
